<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .score-case {
        width: 1000px;
        margin: 50px auto;
        display: flex;
      }

      .score-case .table {
        flex: 4;
      }

      .score-case .table table {
        width: 100%;
        border-spacing: 0;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
      }

      .score-case .table table th {
        background: #f5f5f5;
      }

      .score-case .table table tr:hover td {
        background: #f5f5f5;
      }

      .score-case .table table td,
      .score-case .table table th {
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        text-align: center;
        padding: 10px;
      }

      .score-case .table table td.red,
      .score-case .table table th.red {
        color: red;
      }

      .score-case .table .none {
        height: 100px;
        line-height: 100px;
        color: #999;
      }

      .score-case .form {
        flex: 1;
        padding: 20px;
      }

      .score-case .form .form-item {
        display: flex;
        margin-bottom: 20px;
        align-items: center;
      }

      .score-case .form .form-item .label {
        width: 60px;
        text-align: right;
        font-size: 14px;
      }

      .score-case .form .form-item .input {
        flex: 1;
      }

      .score-case .form .form-item input,
      .score-case .form .form-item select {
        appearance: none;
        outline: none;
        border: 1px solid #ccc;
        width: 200px;
        height: 40px;
        box-sizing: border-box;
        padding: 10px;
        color: #666;
      }

      .score-case .form .form-item input::placeholder {
        color: #666;
      }

      .score-case .form .form-item .cancel,
      .score-case .form .form-item .submit {
        appearance: none;
        outline: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px 10px;
        margin-right: 10px;
        font-size: 12px;
        background: #ccc;
      }

      .score-case .form .form-item .submit {
        border-color: #069;
        background: #069;
        color: #fff;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="score-case">
        <div class="table">
          <table>
            <thead>
              <tr>
                <th><input type="checkbox" v-model="checkAll" /></th>
                <th>编号</th>
                <th>科目</th>
                <th>成绩</th>
                <th>考试时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody v-if="list.length">
              <tr v-for="(item, index) in list">
                <td><input v-model="item.isSelect" type="checkbox" /></td>
                <td>{{ index + 1 }}</td>
                <td>{{ item.subject }}</td>
                <td :class="{red: item.score < 60}">{{ item.score }}</td>
                <td>{{ formatTime(item.date) }}</td>
                <td>
                  <a @click.prevent="del(item.id)" href="#">删除</a>
                </td>
              </tr>
            </tbody>
            <tbody v-else>
              <tr>
                <td colspan="6">
                  <span class="none">暂无数据</span>
                </td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="6">
                  <span>总分：{{ totalScore }}</span>
                  <span style="margin-left:50px"
                    >平均分：{{ avgScore.toFixed(2) }}</span
                  >
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
        <div class="form">
          <div class="form-item">
            <div class="label">科目：</div>
            <div class="input">
              <input
                v-model.trim="subject"
                type="text"
                placeholder="请输入科目"
              />
            </div>
          </div>
          <div class="form-item">
            <div class="label">分数：</div>
            <div class="input">
              <input
                v-model.trim.number="score"
                type="text"
                placeholder="请输入分数"
              />
            </div>
          </div>
          <div class="form-item">
            <div class="label"></div>
            <div class="input">
              <button @click="add" class="submit">添加</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="./vue.js"></script>
    <script src="./dayjs.min.js"></script>
    <script>
      new Vue({
        el: '#app',
        data () {
          return {
            // 左边有用左边的，左边没有用右边的
            list: JSON.parse(localStorage.getItem('score95')) || [],
            subject: '',
            score: ''
          }
        },
        methods: {
          // 处理日期的函数
          formatTime (date) {
            return dayjs(date).format('YYYY-MM-DD')
          },
          del (id) {
            // 删掉一个元素，相当于筛选出除了它以外的元素
            // 只有当id不等于要删的id才会进到新数组
            // 也就是说新数组里就不包含要删的id的那条数据了，相当于就是把它删掉了
            this.list = this.list.filter(v => v.id !== id)

            // 以下代码仅用来复习filter
            // const list = [10,20,30,40]
            // 下面的代码的意思是，只有大于等于20的才会进入到新数组
            // const res = list.filter(v =>  v >= 20 )
            // console.log(res)
          },

          // 添加的点击事件
          add () {
            // 非空判断
            if (this.subject === '' || this.score === '') {
              return alert('请输入完整内容')
            }

            // 把输入的内容加到数组里
            this.list.push({
              // 不能重复
              id: Date.now(),
              subject: this.subject,
              score: this.score,
              date: new Date(),
              isSelect: false
            })

            // 清空输入内容
            this.subject = this.score = ''
          }
        },
        // 写计算属性的地方
        computed: {
          totalScore () {
            // // 把数组累加起来
            // let sum = 0
            // this.list.forEach(v => {
            //    sum += v.score
            // })
            // // 循环完了这个sum就是累加的和
            // return sum

            // 我们发现，每次都要声明一个求和变量，而且这个变量从0开始
            // 有一个方法叫reduce，它能在内部声明sum这个变量
            return this.list.reduce((sum, v) => (sum += v.score), 0)
          },
          // 平均分
          avgScore () {
            if (this.list.length === 0) return 0
            return this.totalScore / this.list.length
          },

          checkAll: {
            get () {
              // 这个数据要根据下面的数组的选中状态来决定
              // 都选中才返回true，但凡有一个没选中返回false
              // return this.list.every(v => {
              //   return v.isSelect === true
              // })
              if (this.list.length == 0) return false
              // 找v.isSelect的值，都是true，返回的才是true，有一个是false，返回的是false
              return this.list.every(v => v.isSelect)
            },
            set (val) {
              // val就是全选里的选中状态，如果它是true，下面的都要为true
              // 如果它是false，下面的都要为false
              this.list.forEach(v => (v.isSelect = val))
            }
          }
        },
        // 侦听器
        watch: {
          list () {
            localStorage.setItem('score95', JSON.stringify(this.list))
          }
        }
      })
    </script>
  </body>
</html>
